<template>
  <div :class="$style.container">
    <div id="mpanel"/>
  </div>
</template>

<script>
export default {
  props: {
    width: {
      type: String,
      default: '350px'
    },
    height: {
      type: String,
      default: '40px'
    },
    vOffset: {
      type: Number,
      default: 5
    },
    type: {
      type: Number,
      default: 1
    },
    refresh: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      obj: {}
    }
  },
  watch: {
    refresh(val) {
      if (val) {
        this.refreshClick()
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    refreshClick() {
      if (Object.keys(this.obj).length > 0) {
        this.obj.refresh()
      }
    },
    init() {
      let that = this
      $('#mpanel').slideVerify({
        type: this.type, //类型
        vOffset: this.vOffset, //误差量，根据需求自行调整
        barSize: {
          width: this.width,
          height: this.height
        },
        ready: function() {},
        success: function(obj) {
          that.obj = obj
          that.$emit('success')
        }
      })
    }
  }
}
</script>

<style lang='scss' module>
.container {
}
</style>
<style>
@import '../vertify/css/index.css';
</style>
